

<template>
<mu-paper :z-depth="1" class="lan-loadmore-body">
  <mu-appbar color="primary" class="lan-header">
      <mu-button icon slot="left" v-close>
        <i class="iconfont angle-left iconangle-left"></i>
        <span class="lan-header-back">返回</span>
      </mu-button>
      检查任务
      <mu-button icon slot="right" >
        <!-- <span class="text">本地保存</span> -->
      </mu-button>
    </mu-appbar>
  <mu-container ref="container" class="lan-loadmore-content no-padding">
    <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="">
          <mu-form-item label="项目名称" class="form-between required" >
            <span class="normal-font-size form-right-text" @click="goSelectProject" >{{form.orgName?form.orgName:'请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="所属区域" class="form-between required " >
            <span class="normal-font-size form-right-text" @click="openArea">{{form.areaName?form.areaName:'请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="检查部位" class="inline-item required">
            <mu-text-field v-model="form.checkParts" multi-line placeholder="请输入" :rows="3" :rows-max="6" ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="平面图标记" class="inline-item">
            <div style="height:1.5rem;width:100%;line-height:1.2rem;text-align:center;margin:0;" v-if="!areaDetail.photoUrl">暂无平面图(请先选择区域)</div>
            <MapShow :single="true" :width="'100%'" enableClick :url="areaDetail.photoUrl" v-model="points" v-else></MapShow>
          </mu-form-item>
          <mu-form-item label="检查类型 " class="required">
            <mu-select
              v-model="form.checkTypeId"
              placeholder="请选择"
              popover-class="lan-popover-select"
            >
              <mu-option
                v-for="(list,index) in checkTypeList"
                :key="index"
                :label="list.name"
                :value="list.id"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="使用检查指导表" class="form-between required">
            <mu-switch style="height:auto;overflow-y:hidden;"  v-model="form.useTable" @change="tableChange"></mu-switch>
            <!-- <mt-switch v-model="form.useTable"></mt-switch> -->
          </mu-form-item>
          <mu-form-item label="检查指导表" class="form-between required" v-show="form.useTable">
            <span class="normal-font-size form-right-text" @click="openTable">{{`已选${this.tableSelectList.length}个`}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <!-- 选择的检查指导表 -->
          <mu-form-item label="" class="column-item" v-show="form.useTable && tableSelectList.length>0" style="padding-bottom:0.4rem;padding-top:0.4rem;">
            <showTable v-for="(item,index) in tableSelectList" :key="index" :data="item.detailInfo"></showTable>
          </mu-form-item>
          <mu-form-item label="排查问题" v-show="!form.useTable" class="inline-item op-texarea " v-for="(item,index) in questions" :key="index">
            <mu-text-field v-model="item.name" multi-line placeholder="请输入" :rows="3" :rows-max="5" ></mu-text-field>
            <div class="full-width footer-op">
              <mu-button small icon class="no-margin float-left" @click="addQues" v-if="index == questions.length-1">
                <mu-icon color="primary" value="add_circle"></mu-icon>
              </mu-button>
              <mu-button small icon class="no-margin float-right" @click="deleteQues(index)" v-if="questions.length>1">
                <mu-icon color="primary" value="delete"></mu-icon>
              </mu-button>
            </div>
          </mu-form-item>
          <mu-form-item label="任务描述" class="inline-item required">
            <mu-text-field v-model="form.description" multi-line placeholder="请输入" :rows="4" :rows-max="8" ></mu-text-field>
          </mu-form-item>
          <mu-form-item label="检查频率" class="required">
            <mu-select
              v-model="form.checkFrequency"
              placeholder="请选择"
              popover-class="lan-popover-select"
            >
              <mu-option
                v-for="(list,index) in rateList"
                :key="index"
                :label="list+'天/次'"
                :value="list"
              ></mu-option>
            </mu-select>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="检查人" class="form-between required" >
            <span class="normal-font-size form-right-text" @click="goSelectUser(false)" >{{form.checkUser?form.checkUser:'请选择'}}</span>
            <!-- <mu-text-field  placeholder="" v-model="form.checkUser" :disabled="true" :value="'张某某'"></mu-text-field> -->
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="生效日期" class="required">
            <mu-date-input
              v-model="form.startTime"
              :min-date="new Date()"
              placeholder="请选择"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              container="bottomSheet"
              label-float
              @change="startUpdate"
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="检查时限" class="required">
            <mu-date-input
              v-model="form.endTime"
              placeholder="请选择"
              container="bottomSheet"
              label-float
              :min-date="xianzhiDate"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            ></mu-date-input>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="责任单位" class="form-between required" >
            <span class="normal-font-size form-right-text" @click="goSelectUnit" >{{form.responsibleUnit?form.responsibleUnit:'请选择'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <mu-form-item label="责任人" class="form-between required" >
            <span class="normal-font-size form-right-text" @click="goSelectUser(true)" >{{form.responsibleUser?form.responsibleUser:'请选择'}}</span>
            <!-- <mu-text-field  placeholder="请输入"></mu-text-field> -->
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>

          <mu-form-item class="form-submit">
            <!-- <mu-button color="primary">重置</mu-button> -->
            <mu-button full-width color="primary" @click="saveData">提交</mu-button>
          </mu-form-item>
        </mu-form>

  </mu-container>
  <!-- 选检查表 -->
  <mu-dialog
      width="100%"
      transition="slide-right"
      fullscreen
      :open.sync="alltableCon"
      class="lan-dialog"
    >
    <allTable v-if="alltableCon" :checkedList="tableIds" @cancel="alltableCon = false" @ok="getSomeTable"></allTable>
  </mu-dialog>

  <!-- 选项目 -->
  <Org ref="org" v-if="pojectOpen" :open="pojectOpen" :customRoot="customRoot" :orgType="orgTypeSelect" @close="pojectOpen = false" @change="orgChange" @confirm="pojectOpen = false"></Org>
  <!-- 选人 -->
  <User  v-if="userOpen && userType" :multiple="false" :open="userOpen" :orgType="'currOrgProject'" :dataScope="userType" :customRoot="userCustomRoot" @change="userChange" @close="userOpen = false"></User>
  <User  v-if="userOpen && !userType" :multiple="false" :open="userOpen" :orgType="'currOrgProject'"  :customRoot="userCustomRoot" @change="userChange" @close="userOpen = false"></User>
  <!-- 选择区域 -->
  <mu-dialog
      width="100%"
      transition="slide-right"
      fullscreen
      :open.sync="areaController"
      class="lan-dialog"
    >
      <mu-appbar color="primary" class="lan-header">
        <mu-button icon slot="left" @click="areaController = false">
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>区域
      </mu-appbar>
      <div class="lan-dialog-body no-padding">
        <mTree
          v-if="areaController"
          :data="tree.data"
          :props="tree.defaultProps"
          :clickableConditions="tree.clickableConditions"
          @click="skipPage"
        ></mTree>
      </div>
  </mu-dialog>
</mu-paper>
</template>

<script>
import allTable from "./allTable";
import showTable from "./showTable";
import Org from "@/select/org/Org";
import User from "@/select/user/User";
import mTree from "@/tree/mTree";
export default {
	name: 'check',
	components: {
    allTable,showTable,Org,User,mTree
	},
  data() {
    return {
      form:{
        "areaId": "",//区域平面图id
        areaName:'',
        "checkFrequency": '',//检查频率
        "checkParts": "",//任务所属部委
        "checkProblems": "[]",//排查问题(数组格式字符串)
        "lonLat":"[]",
        "checkTypeId": "",//检查类型id
        checkType:'',
        "checkUserId": "",//检查人id
        checkUser:'',
        "description": "",//任务描述
        "endTime": "",//任务截止时间
        "orgId": "",//项目id
        orgName:'',
        "fileAddress":"",//---
        "responsibleUnitId": "",//责任单位id
        responsibleUnit:'',
        "responsibleUserId": "",//责任人id
        responsibleUser:'',
        "startTime": "",//生效时间
        useTable:false,
        "tableIds": [],//检查表id列表
        "tenantId": "1"
      },
      points:[],
      checkTypeList:[],
      projectList:[],
      questions:[{name:''}],
      tableSelectList:[],
      rateList:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31',],
      alltableCon:false,
      tableIds:[],
      pojectOpen:false,
      userOpen:false,
      orgTypeSelect:'currOrgProject',
      userType:'',
      topUserId:'',
      areaController:false,
      tree: {
          defaultProps: {
            id: "id",
            name: "name",
            children: "children"
          },
          clickableConditions: {
            all: {
              //所有的是否可以点击
              enable: true
            },
            part: {
              //部分的可以点击的条件
              prop: "orgType",
              value: [1]
            }
          },
          data: []
        },
        customRoot:[],
        areaDetail:{},
        userCustomRoot:[],
        xianzhiDate:new Date(),

    };
  },
  async created() {
    // this.projectList = await this.$A.comData("projectList");
    let nowinfo = this.$A.GS('orgInfo')
    if(nowinfo['type'] == 1){
      this.form.orgName = nowinfo['orgName']
      this.form.orgId = nowinfo['orgId']
      this.customRoot = []
      this.orgTypeSelect = 'currOrgProject'
      this.loadTreeData()
    }
    this.checkTypeList = await this.$A.comData("checkTypeList");
  },
  mounted() {},
  methods: {
    startUpdate(value){
      this.xianzhiDate = new Date(value)
      if(this.form.endTime){
         let now = new Date(value).getTime()
         let xian = new Date(this.form.endTime).getTime()
         if(xian < now){
           this.form.endTime = ''
         }
      }
    },
    openArea(){
      if(!this.form.orgId){
        this.$A.MS("请先选择项目")
        return;
      }
      this.areaController = true;
    },
    skipPage(value){
      console.log(value)
      this.form.areaName = value.name
      this.form.areaId = value.id
      this.areaController = false;
      this.getProjectUnit(value.id)
    },
    goSelectUnit(){
      if(!this.form.orgId){
        this.$A.MS("请先选择项目")
        return;
      }
      this.customRoot = [{type:'1',value:this.form.orgId,label:this.form.orgName}]
      this.orgTypeSelect = 'currContacts'
      this.pojectOpen = true
    },
    goSelectProject(){
      this.customRoot = []
      this.orgTypeSelect = 'currOrgProject'
      this.pojectOpen = true
    },
    goSelectUser(isnot){
      if(!this.form.orgId){
        this.$A.MS("请先选择项目")
        return;
      }
      this.userCustomRoot = [{type:'1',value:this.form.orgId,label:this.form.orgName}];
      console.log(this.userCustomRoot)
      if(isnot){
        this.userType = 'project'
      }else{
        this.userType = ''
      }
      this.userOpen = true
    },
    orgChange(value){
      console.log(value)
      console.log(this.orgTypeSelect)
      if(this.orgTypeSelect == 'currOrgProject'){
        this.form.orgId = value[0].id || value[0].value
        this.form.orgName = value[0].projectName || value[0].label
        this.form.areaId = ''
        this.form.checkParts = '';
        this.form.checkProblems = [];
        this.form.lonLat = []
        this.form.checkUserId = ''
        this.form.checkUser = ''
        this.form.responsibleUnitId = '';
        this.form.responsibleUnit = ''

        this.loadTreeData()
      }else{
        this.form.responsibleUnitId = value[0].id
        this.form.responsibleUnit = value[0].name
      }

    },
    userChange(value){
      console.log(value)
      if(this.userType){
        this.form.responsibleUserId = value[0].id
        this.form.responsibleUser = value[0].employeeName
        this.userCustomRoot = [];
      }else{
        this.userCustomRoot = [{type:'1',value:this.form.orgId,label:this.form.orgName}]
        this.form.checkUserId = value[0].id
        this.form.checkUser = value[0].employeeName
      }
      this.userOpen = false;

    },
    //获取区域所带的责任单位和责任人
    getProjectUnit(id){//areaDetail
      this.$A.Go("get", '/safety/projectArea/detail', {id}).then(
          response => {
            if (response.code == 200) {
              this.areaDetail = response.body || {};
              this.form.responsibleUnitId = this.areaDetail.corpId
              this.form.responsibleUnit = this.areaDetail.corpName
              this.form.responsibleUserId = this.areaDetail.userId
              this.form.responsibleUser = this.areaDetail.userName

            } else {
              this.$A.MS(response.msg)
            }
            this.$closeLoading();
          },
          err => {
            this.$closeLoading();
            console.log(err);
          }
        );
    },
    //增加问题
    addQues(){
      this.questions.push({name:''})
    },
    deleteQues(index){
      this.questions.splice(index,1)
    },
    tableChange(value){
      // console.log(value)
      if(value){//使用检查指导表
        this.questions = [{name:''}]
      }else{//使用问题
        this.tableSelectList = []
      }
    },
    openTable(){
      if(this.tableSelectList.length>0){
        this.tableIds = this.tableSelectList.map(o=>o.id)
      }
      this.alltableCon = true;

    },
    getSomeTable(list){
      this.tableSelectList = []
      this.tableSelectList = list
      this.alltableCon = false
    },
    loadTreeData() {
        this.$openLoading();
        let params = {
          orgId: this.form.orgId,
          type: '1',
        };
        this.$A.Go("get", '/safety/projectArea/tree', params).then(
          response => {
            if (response.code == 200) {
              this.tree.data = response.body || [];
              // this.dataPool = response.body;
            } else {
              this.$A.MS(response.msg)
            }
            this.$closeLoading();
          },
          err => {
            this.$closeLoading();
            console.log(err);
          }
        );
    },
    saveData(){
      console.log(this.points)
      console.log(this.questions)
      // "areaId": "",//区域平面图id
      //   areaName:'',
      //   "checkFrequency": '',//检查频率
      //   "checkParts": "",//任务所属部委
      //   "checkProblems": "['1','2']",//排查问题(数组格式字符串)
      //   "checkTypeId": "",//检查类型id
      //   checkType:'',
      //   "checkUserId": "",//检查人id
      //   checkUser:'',
      //   "description": "",//任务描述
      //   "endTime": "",//任务截止时间
      //   "orgId": "",//项目id
      //   orgName:'',
      //   "fileAddress":"",//---
      //   "responsibleUnitId": "",//责任单位id
      //   responsibleUnit:'',
      //   "responsibleUserId": "",//责任人id
      //   responsibleUser:'',
      //   "startTime": "",//生效时间
      //   useTable:true,
      //   "tableIds": [],//检查表id列表
      //   "tenantId": "1"
      if(!this.form.orgId){
        this.$A.MS('请选择项目')
        this.form.orgId = ''
        this.form.orgName = ''
        return;
      }
      if(!this.form.areaId){
        this.$A.MS('请选择区域')
        this.form.areaId = ''
        this.form.areaName = ''
        return;
      }
      if(!this.form.checkParts){
        this.$A.MS('请填写检查部位')
        this.form.checkParts = ''
        return;
      }
      if(this.points.length > 0){
        let str = this.points[0]['left']+','+this.points[0]['top']
        this.form.lonLat = JSON.stringify([str]);
      }else{
        this.form.lonLat = JSON.stringify([])
      }
      if(!this.form.checkTypeId){
        this.$A.MS('请选择检查类型')
        this.form.checkTypeId = ''
        this.form.checkType = ''
        return;
      }
      if(this.form.useTable){
        if(this.tableSelectList.length <= 0){
          this.$A.MS('请选择检查指导表')
          this.form.tableIds = []
          return ;
        }else{
          this.form.tableIds = this.tableSelectList.map(o=>o.id)
        }
      }else{
        if(this.questions.length <= 0){
          this.form.checkProblems = []
          return ;
        }else{
          // let arr = this.questions.filter(o=>!o.name)
          // if(arr.length > 0){
          //   this.$A.MS('请完整填写排查问题')
          //   this.form.checkProblems = []
          //   return;
          // }else{
          //   // this.form.checkProblems = JSON.stringify(this.questions.map(o=>o.name))
          //   this.form.checkProblems = this.questions.map(o=>o.name)
          // }
          this.form.checkProblems = this.questions.map(o=>o.name)
        }
      }
      if(!this.form.description){
        this.$A.MS('请填写任务描述')
        return;
      }
      if(!this.form.checkFrequency){
        this.$A.MS('请检查频率')
        return;
      }
      if(!this.form.checkUserId){
        this.$A.MS('请选择检查人')
        return;
      }
      if(!this.form.startTime){
        this.$A.MS('请选择生效日期')
        return;
      }
      if(!this.form.endTime){
        this.$A.MS('请选择检查时限')
        return;
      }
      let obj = {
        "areaId": this.form.areaId,//区域平面图id
        "checkFrequency": this.form.checkFrequency,//检查频率
        "checkParts": this.form.checkParts,//任务所属部委
        "checkProblems": JSON.stringify(this.form.checkProblems || []),//排查问题(数组格式字符串)
        "checkTypeId": this.form.checkTypeId,//检查类型id
        "checkUserId": this.form.checkUserId,//检查人id
        "description": this.form.description,//任务描述
        "endTime": this.form.endTime,//任务截止时间
        "orgId": this.form.orgId,//项目id
        "lonLat":this.form.lonLat,//
        "fileAddress":"",//---
        "responsibleUnitId": this.form.responsibleUnitId,//责任单位id
        "responsibleUserId": this.form.responsibleUserId,//责任人id
        "startTime": this.form.startTime,//生效时间
        "tableIds": this.form.tableIds,//检查表id列表
        // "tenantId": "1"
      }
      this.$openLoading();
      this.$A.Go('post','/safety/checkPlan/add',obj).then(success=>{
        if(success.code == 200){
          this.$A.MS('提交成功')
          this.$router.back();
        }else{
          this.$A.MS(success.msg)
        }
        this.$closeLoading();
      },err=>{
          console.log(err)
          this.$closeLoading();
      })
    },
  }
};
</script>

<style scoped lang='scss' scoped>
.check {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

	.header {
		color: #888888;
		background-color: #FFFFFF;
	}

  content {
		z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .mu-tabs {
      background-color: #f5f5f5;
    }
    .demo-text {
      padding: 8px;
      background: #fff;
    }
  }

}
</style>
<style scoped lang='scss'>
  .footer-op{
    box-sizing:border-box;
    padding:0.05rem 0;
    margin-top:0 !important;
    overflow:auto;
  }
  .op-texarea{
    .mu-form-item-content{
      .mu-input{
        border:0.01rem solid #e8e8e8;
        border-radius:0.04rem;
        padding:0.05rem;
      }
    }
  }

</style>
